<script lang="ts" setup>
import { getUserInfoApi } from '@/apis/login';
import router from '@/router';
import { useUserStore } from '@/stores';
import { Document, HomeFilled, Promotion, Unlock } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';

// 退出登录
const logout = () => {
  ElMessageBox.confirm(
    '您确定要退出吗？',
    '确认退出',
    {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    useUserStore().clearUserInfo()
    router.push('/login')
    ElMessage.success({
      message: '退出成功',
      type: 'success'
    })
  }).catch()
}
const user = ref<string>('')
const getUserInfo = async () => {
  const res = await getUserInfoApi()
  user.value = res.data.data.name|| res.data.data.mobile
}
getUserInfo()
</script>

<template>
  <el-container class="container">
    <el-aside width="200px">
      <!-- logo -->
      <div class="logo"></div>
      <!-- 侧边栏 -->
      <el-menu background-color="#023" style="border-right:none" text-color="#fff" :default-active="$route.path" router>
        <el-menu-item index="/overview">
          <el-icon>
            <HomeFilled />
          </el-icon>

          <span>数据概览</span>

        </el-menu-item>

        <el-menu-item index="/article">
          <el-icon>
            <Document />
          </el-icon>

          <span>内容管理</span>

        </el-menu-item>

        <el-menu-item index="/publish">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>发布文章</span>

        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <span style="margin-right:20px">{{ user }}</span>
        <!-- 图标 -->
        <div class="icon">
          <el-icon>
            <Unlock />
          </el-icon>
          <span style="cursor: pointer; margin-left: 5px;" @click="logout">退出</span>
        </div>
      </el-header>
      <!-- 内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>

  </el-container>
</template>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  .el-aside {
    background: #023;

    .logo {
      width: 200px;
      height: 60px;
      background: #023 url('@/assets/login.png') no-repeat center / 160px auto;
    }
  }

  .el-header {
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.icon {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
}
</style>
